<script setup>
import {nextTick, ref} from "vue";
import {findTypeSetById, updateTypeSet} from "@/apis/zyj/typeSetting";
import {ElMessage} from "element-plus";

const props = defineProps({
  updateDialog: Boolean,
  form: Object
})

const ruleFormRef = ref();//表单验证
const emit = defineEmits(['close-dialog'])
const handleClose = () => {
  emit('close-dialog')
}

const handleConfirm = (value) => {
  value.validate(valid => {
    if (valid) {
      updateTypeSet(props.form).then(req => {
        console.log(req)
        if (req == '成功') {
          ElMessage.success('修改成功')
        } else {
          ElMessage.error('修改失败')
        }
        handleClose()
      })
    } else ElMessage.error('请填写完整信息');
  });
}

const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}

const rules = {
  typeCode: [
    {required: true, message: '请输入类型编码', trigger: 'blur'},
  ],
  typeName: [
    {required: true, message: '请输入类型名称', trigger: 'blur'},
  ],
  isCodeManaged:
      [
        {required: true, message: '请选择是否编码管理', trigger: 'blur'},
      ],
}
</script>

<template>
  <div class="dialog-class">
    <el-dialog title="修改工装夹具类型" v-model="props.updateDialog" @close="handleClose" @open="handleOpenCardDialog"
               width="55%">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="类型编码" prop="typeCode">
              <el-input v-model="form.typeCode" disabled placeholder="请输入类型编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 20px">
            <el-form-item label="类型名称" prop="typeName">
              <el-input v-model="form.typeName" placeholder="请输入类型名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="flex-wrap: nowrap;">
          <el-col :span="8">
            <el-form-item label="是否编码管理" prop="isCodeManaged">
              <el-radio-group v-model="form.isCodeManaged">
                <el-radio label="0" value="0">是</el-radio>
                <el-radio label="1" value="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <div style="display: flex" v-show="form.isCodeManaged === '0'">
            <el-form-item label="保养维护类型">
              <el-select v-model="form.maintenanceType" placeholder="请选择保养维护类型" style="width: 180px">
                <el-option label="定期维护" value="定期维护"/>
                <el-option label="按使用次数维护" value="按使用次数维护"/>
              </el-select>
            </el-form-item>
            <el-form-item label="保养周期">
              <el-input v-model="form.maintenancePeriod" placeholder="请输入保养周期"/>
            </el-form-item>
          </div>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注">
              <el-mention
                  v-model="form.remark"
                  type="textarea"
                  style="width: 320px"
                  placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
           <el-button @click="handleClose">取消</el-button>
           <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
         </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>